<template>
	<el-form ref="form" :model="form" label-width="80px" size="small" v-loading.fullscreen.lock="fullscreenLoading">
		<el-row>
			<el-col :span="12">
				<el-form-item label="用户名" required="">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="角色" required>
					<el-select v-model="form.roleCode" placeholder="请选择" style="width:100%;">
						<el-option v-for="(role, index) of roleList" :key="index" :label="role.roleName"
							:value="role.roleCode"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="12">
				<el-form-item label="密码" required>
					<el-input v-model="form.password" show-password></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="确认密码" required>
					<el-input v-model="form.repassword" show-password></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>

			<el-col :span="12">
				<el-form-item label="姓名" required>
					<el-input v-model="form.name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="手机号" required>
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<!-- <el-col :span="12"> -->
				<el-form-item label="有效期" required>
					<!-- <el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" value-format="yyyy-MM-dd" style="width: 100%;">
						</el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align:center;">-</el-col>
					<el-col :span="11">
						<el-date-picker placeholder="选择时间" v-model="form.endTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
					</el-col> -->
					<el-col :span="11">
						<el-date-picker type="daterange" unlink-panels placeholder="选择日期" v-model="form.expireTime" value-format="yyyy-MM-dd" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
			<!-- </el-col> -->
		</el-row>

		<el-form-item label="备注">
			<el-input type="textarea" v-model="form.bz"></el-input>
		</el-form-item>

		<el-form-item>
			<el-button size="small" @click="cancel">取 消</el-button>
			<el-button type="primary" size="small" @click="confirm">确 定</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import RoleMixin from './../../../mixins/role.mixin';

	export default {
		name: 'UserAddDialog',
		mixins: [RoleMixin],
		data() {
			return {
				form: {
					roleCode: '',
					userName: '',
					password: '',
					repassword: '',
					name: '',
					phone: '',
					expireTime: null,
					startTime: '',
					endTime: '',
					bz: ''
                },
                
                fullscreenLoading: false
			}
		},
		computed: {
			...mapState({
				roleList: 'roleList'
			})
		},
		created() {
			if (this.roleList.length === 0) {
				this.getRoleRemote().then(response => {
					this.saveRoleList(response);
				});
			}
		},
		methods: {
			...mapMutations({
				saveRoleList: 'commitRoleList'
			}),
			cancel() {
				this.$emit('userAddEvent', false);
            },
            checkUser(){
                return this.$svHttp.httpGet(this.$svHttp.Api.uCheck, {
                    phone: this.form.phone,
                    userName: this.form.userName
                });
            },
            validate() {
                return new Promise(resolve=>{
                    let form = this.form;
                    this.checkUser().then(result=>{
                        if( result === false ) return this.$message({ type: 'warning', message: '该用户名或手机号码已经被注册!'});
                        else {
                            if(form.userName.trim() === '') return this.$message({ type: 'warning', message: '请填写用户名!'});
                            if(form.roleCode.trim() === '') return this.$message({ type: 'warning', message: '请选择角色!'});

                            if(form.password.trim() === '') return this.$message({ type: 'warning', message: '请填写密码!'});
                            if(form.repassword.trim() === '') return this.$message({ type: 'warning', message: '请填写确认密码!'});

                            if(form.name.trim() === '') return this.$message({ type: 'warning', message: '请填写姓名!'});
                            if(!/^1\d{10}$/.test(form.phone.trim())) return this.$message({ type: 'warning', message: '请填写正确的手机号码!'});

                            if( form.repassword !== form.password ) return this.$message({ type: 'warning', message: '两次填写的密码不一致!'});
							if(form.expireTime==null) return this.$message({ type: 'warning', message: '请选择用户过期时间!'});

                            resolve();
                        }
                    })
                });
            },
			confirm() {
                this.validate().then(()=>{
                    this.fullscreenLoading = true;
                    let url = this.$svHttp.Api.uAdd;
                    this.$svHttp.httpPost(url, {
                        ...this.form,
						startTime: this.form.expireTime[0],
						endTime: this.form.expireTime[1],
                        status: 1
                    }).then(response => {
                        this.fullscreenLoading = false;
                        if (response) {
                            console.info(response);
                            this.$emit('userAddEvent', this.form);
                        }
                    });
                });	
			}
		}
	}

</script>

<style lang="scss" scoped>
	.el-form-item {
		margin-bottom: 10px;
	}

</style>
